<template>
	<div class="search-container" id="search-container">
		<el-form label-position="top" label-width="80px" :model="form">
			<el-form-item label="业务记录ID">
				<el-input placeholder="请输入业务记录ID" v-model="form.id"></el-input>
			</el-form-item>
			<el-form-item label="业务流水ID">
				<el-input placeholder="请输入业务流水ID" v-model="form.businessflowId"></el-input>
			</el-form-item>
			<el-form-item label="受理时间">
				<el-col :span="11">
					<el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
				</el-col>
				<el-col class="search-line" :span="2">-</el-col>
				<el-col :span="11">
					<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="业务场景名称">
				<el-input placeholder="请输入业务场景名称" v-model="form.bizScenarioName"></el-input>
			</el-form-item>
			<el-form-item label="访客ID">
				<el-input placeholder="请输入访客ID" v-model="form.customerName"></el-input>
			</el-form-item>
			<el-form-item label="坐席ID">
				<el-input placeholder="请输入坐席ID" v-model="form.agentName"></el-input>
			</el-form-item>
			<el-form-item label="业务状态">
				<el-select v-model="form.status" placeholder="请选择业务状态">
					<el-option v-for="item in qualityInspectionStatus" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="会话记录">
				<el-input placeholder="请输入Session ID" v-model="form.sessionId"></el-input>
			</el-form-item>
			<el-form-item label="坐席姓名">
				<el-input placeholder="请输入坐席姓名" v-model="form.fullName"></el-input>
			</el-form-item>
			<el-form-item label="" class="btn">
				<el-button @click="searchData">检索</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// {bizScenarioName, status, startTime, endTime}
			form: {
				id: '',
				businessflowId: '',
				bizScenarioName: '',
				status: -1,
				startTime: '',
				endTime: '',
				customerName: '',
				agentName: '',
				sessionId: '',
				fullName: ''
			},
			pickerOptions: {
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}
				]
			},
			qualityInspectionStatus: [
				{ label: '全部', value: -1 },
				{ label: '进行中', value: 0 },
				{ label: '待质检', value: 1 },
				{ label: '未完成', value: 2 },
				{ label: '待补录', value: 3 },
				{ label: '质检通过', value: 4 },
				{ label: '补录中', value: 5 }
			] // 空 0 代质检 1 代补录 2 通过 3补录中
			// 0: '进行中', // 正在进行中的业务（不包含补录中）
			// 1: '待质检', // 已办结未质检的业务
			// 2: '未完成', // 未办结的业务
			// 3: '待补录', // 质检不通过需要补录的业务
			// 4: '质检通过', // 质检通过的业务
			// 5: '补录中' // 正在进行的补录中的业务
		};
	},
	methods: {
		searchData() {
			this.form.startTime = this.form.startTime ? this.$moment(this.form.startTime).toISOString() : '';
			this.form.endTime = this.form.endTime ? this.$moment(this.form.endTime).toISOString() : '';
			this.$emit('searchData', this.form);
		}
	}
};
</script>

<style lang="less" scoped>
.search-container {
	height: 170px;

	.el-form {
		display: flex;
		flex-wrap: wrap;
		height: 170px;

		.el-form-item {
			padding-right: 18px;
			margin: 0;
		}

		.btn {
			padding: 0;
			.el-button {
				height: 34px;
				width: 64px;
				padding: 0;
				border: 1px solid #6384fe;
				color: #6384fe;
			}
		}
	}
}
</style>

<style lang="less">
.search-container {
	.el-form-item {
		label {
			padding: 0;
		}
		input {
			height: 34px;
		}
	}
	.btn {
		.el-form-item__content {
			line-height: 120px;
		}
	}
	.search-line {
		text-align: center;
		padding: 0 10px;
	}
	.el-form-item__label {
		font-size: 12px;
	}
}
</style>
